import PropTypes from '../_util/vue-types';
import { Row, Col } from '../grid';
import warning from '../_util/warning';

export default {
  name: 'CDetailItem',
  props: {
    type: PropTypes.string.def('default'),
    detailInfo: PropTypes.object,
    customSlots: PropTypes.object,
    itemDetail: PropTypes.object,
  },
  data() {
    return {};
  },
  methods: {
    renderItemContent(itemContent) {
      let fn = null;
      let customSlots = this.customSlots;
      let fieldName = itemContent.fieldName;
      let fieldValue = this.detailInfo[itemContent.fieldName];

      warning(
        !itemContent.slotName || customSlots[itemContent.slotName],
        `slotName ${itemContent.slotName} has declared but never used`,
      );

      if (itemContent.slotName && (fn = customSlots[itemContent.slotName])) {
        return fn({
          fieldName,
          fieldValue,
          info: this.detailInfo,
        });
      }

      if (itemContent.type === 'badge') {
        let badgeInfo = itemContent.badgeMap[fieldValue] || {};
        return (
          <span>
            <a-badge status={badgeInfo.status} text={badgeInfo.text} />
          </span>
        );
      }

      if (itemContent.type === 'tag') {
        let tagInfo = itemContent.tagMap[fieldValue] || {};
        return (
          <span>
            <a-tag class={tagInfo.className}>{tagInfo.text}</a-tag>
          </span>
        );
      }

      return <span title={fieldValue}>{fieldValue}</span>;
    },
    renderItem(itemContent) {
      if (itemContent.isKeeper) {
        return null;
      }

      let { itemDetail } = this;
      let { hasNoBg, labelStyle } = itemDetail;

      let labelContent = (
        <div
          class={`content-label ${itemContent.label ? 'has-colon' : ''}`}
          title={itemContent.label}
          style={itemContent.labelStyle || labelStyle}
        >
          {itemContent.label}
        </div>
      );

      let labelWidth = itemContent.labelStyle ? itemContent.labelStyle.width : labelStyle ? labelStyle.width : void 0;

      let infoContent = (
        <div
          class={{
            'content-info': true,
            'no-bg': itemContent.hasNoBg !== void 0 ? itemContent.hasNoBg : hasNoBg,
            'text-ellipsis': !itemContent.slotName,
          }}
          style={labelWidth !== undefined ? {
            'width': `calc(100% - ${ labelWidth })`,
          } : {}}
        >
          {this.renderItemContent(itemContent)}
        </div>
      );

      return [labelContent, infoContent];
    },
  },
  render(h) {
    let { type, itemDetail } = this;
    let { span, gutter, contentList } = itemDetail;

    if (!contentList) {
      return null;
    }

    return (
      <div class="detail-content">
        <Row
          class="dis-flex"
          gutter={gutter || 0}
          style={{
            display: 'flex',
            flexWrap: 'wrap',
            marginTop: type === 'default' ? '-24px' : '0px',
          }}
        >
          {contentList.map(itemContent => {
            if (!itemContent.isShow || itemContent.isShow()) {
              return (
                <Col
                  style={{ display: 'flex', marginTop: type === 'default' ? '24px' : '0' }}
                  span={itemContent.span || span}
                >
                  {this.renderItem(itemContent)}
                </Col>
              );
            }
            return null;
          })}
        </Row>
      </div>
    );
  },
};
